<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="clock">
        <img src="" id="h1">
        <img src="" id="h2">时
        <img src="" id="m1">
        <img src="" id="m2">分
        <img src="" id="s1">
        <img src="" id="s2">秒
    </div>
    <script>
        // 利用当前的时间来决定你要实现的图片路径
        var date = new Date();
        // 返回值为当前时间，一开始打开页面的时间
        renden(date)
            // 用定时器不断获取最新时间
        setInterval(function() {
                var date = new Date();
                renden(date)

            }, 1000)
            // 求时间当前时间对象的时分秒
        function renden(date) {
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            // 根据时间判断hours1小时是两位数第一位是1  或2
            // 如果是一位数就是0
            // 三目运算判断
            var hours1 = h >= 10 ? parseInt(h / 10) : 0;
            var hours2 = h >= 10 ? h % 10 : h;
            h1.src = 'img/' + hours1 + '.png';
            h2.src = 'img/' + hours2 + '.png';

            var min1 = m >= 10 ? parseInt(m / 10) : 0;
            var min2 = m >= 10 ? m % 10 : m;
            m1.src = 'img/' + min1 + '.png';
            m2.src = 'img/' + min2 + '.png';

            var seconds1 = s > 10 ? parseInt(s / 10) : 0
            var seconds2 = s >= 10 ? s % 10 : s;
            s1.src = 'img/' + seconds1 + '.png';
            s2.src = 'img/' + seconds2 + '.png';
        }
    </script>
</body>

</html>